<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>订单列表</template>
            <template v-slot:right></template>
        </nav-bar>

        <van-tabs ref="tabs" class="order-tab" @click="onChangeTab">
        <van-tab title="全部" name="0"></van-tab>
        <van-tab title="未付款" name="1"></van-tab>
        <van-tab title="已支付" name="2"></van-tab>
        <van-tab title="发货" name="3"></van-tab>
        <van-tab title="交易完成" name="4"></van-tab>
        <van-tab title="过期" name="5"></van-tab>
        </van-tabs>

        <div class="content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="10"
                >

                <div class="mid" v-for="(item,index) in list" :key="index" @click="goTo(item.id)">
                    <van-row>
                    <van-col span="6">订单编号：<br>创建时间：</van-col>
                    <van-col span="12" offset="0">{{item.order_no}}<br>{{item.created_at}}</van-col>
                    </van-row>

                    <van-card v-for="sub in item.orderDetails.data" :key="sub.id"
                    :num="sub.num"
                    :price="sub.price+'.00'"
                    :desc="sub.goods.description"
                    :title="sub.goods.title"
                    :thumb="sub.goods.cover_url"
                    />
                </div>
                
                    
                </van-list>
            </van-pull-refresh>
        </div>


        
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import {toRefs,reactive,onMounted,ref } from 'vue';
import {useRouter,useRoute} from 'vue-router';
import {getOrderList} from 'network/order';


export default {
    name:"Order",
    components:{
        NavBar
    },

    setup() {
        const router = useRouter();
        const route = useRoute();
        let tabs = ref(null);
        const state = reactive({
            loading:false,
            finished:false,
            refreshing:false,
            list:[],
            page:1,
            totalPage:0,
            status:0,
        });

        onMounted(()=>{
            onRefresh();  //初始化
        })


        //多次加载
        const loadDate = () =>{
            getOrderList({page:state.page,status:state.status,include:'orderDetails.goods'}).then(res=>{
                console.log(res);
                state.list = state.list.concat(res.data);
                state.loading=false;

                state.totalPage = res.meta.pagination.total_pages; //得到总页数
console.log(state.page ,'########');
                if(state.page >= state.totalPage) {  //如果当前页 大于 等于总页数执行
                    state.finished = true;   //下拉加载再多 加上就是 加载完就不再滚动
                }

            })
        }

        const onLoad = () => {

            if(!state.refreshing && state.page < state.totalPage){     //如果当前页小于总页数，再执行下拉加1   !state.refreshing如果上拉加载更多是假取反
                state.page = state.page  + 1 ;
            }


            if(state.refreshing){
                state.list = [];
                state.refreshing = false;
            }
            loadDate();
        };

        const onRefresh = () => {
            //是否处于加载状态，加载过程中不触发load事件
            state.refreshing = true;
            // 清空列表数据
            state.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            state.loading = true;

            state.page = 1;
            onLoad();
        };

        //切换顶部tab
        const onChangeTab = (name) =>{
            console.log(name);
            state.status = name;
            onRefresh();     //初始化加载
        }

        //到订单详情
        const goTo =(id)=>{
            router.push({path:'/orderdetail',query:{id:id}})
        }

        return {
            ...toRefs(state),
            onLoad,
            onRefresh,
            tabs,
            onChangeTab,
            goTo
        };

    },
}
</script>

<style scoped lang="scss">
.order-tab {
    margin-top: 45px;
    position:sticky;
    top:45px !important;
    z-index: 999;
}
.mid{
    padding: 20px;
    height: auto;
    text-align: left;
    line-height: 30px;
    background: #f0f0f0;
}
</style>

